<template>
  <div>
    <!-- 二级路由占位符 -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component"></component>
      </keep-alive>
    </router-view>

    <!-- 底部选项卡 -->
    <van-tabbar @change="tabChange" v-model="active" active-color="#ee0a24">
      <!-- 电影 -->
      <van-tabbar-item name="/home/index">
        <span>电影</span>
        <template #icon="props">
          <img
            :src="require(`../assets/tabs/index_${props.active ? 1 : 0}.png`)"
            alt=""
          />
        </template>
      </van-tabbar-item>
      <!-- 视频 -->
      <van-tabbar-item name="/home/video">
        <span>视频</span>
        <template #icon="props">
          <img
            :src="require(`../assets/tabs/video_${props.active ? 1 : 0}.png`)"
            alt=""
          />
        </template>
      </van-tabbar-item>
      <!-- 演出 -->
      <van-tabbar-item icon="friends-o" name="/home/show">
        <span>演出</span>
        <template #icon="props">
          <img
            :src="require(`../assets/tabs/show_${props.active ? 1 : 0}.png`)"
            alt=""
          /> </template
      ></van-tabbar-item>
      <!-- 我的 -->
      <van-tabbar-item icon="setting-o" name="/home/me">
        <span>我的</span>
        <template #icon="props">
          <img v-show="!props.active" src="../assets/tabs/me_0.png" alt="" />
          <img v-show="props.active" src="../assets/tabs/me_1.png" alt="" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

// 底部选项卡相关业务
const active = ref("/home/index");
const tabChange = function (index: string) {
  router.push(index);
};
</script>
